import Taro, { Component, Config, getCurrentPages } from '@tarojs/taro'
import { AtButton } from 'taro-ui'
import { View, Text, Image } from '@tarojs/components'
import { observer, inject } from '@tarojs/mobx'
import '@tarojs/async-await'
import './result.scss'
import Stores from '../../stores/storeIdentifier'
import OrderStore from '../../stores/orderStore'
import { PayResultModel } from '../../services/dto/payResultModel'
import { JsApiReturnModel } from '../../services/dto/jsApiReturnModel';
import { OrderDto } from '../../services/order/dto/orderDto';
import CartStore from '../../stores/cartStore';

export interface IIndexProps {
  orderStore: OrderStore,
  cartStore: CartStore
}
@inject(Stores.OrderStore, Stores.CartStore)
@observer
class Result extends Component<IIndexProps> {
  config: Config = {
    navigationBarTitleText: '支付结果'
  }
  type: string
  isLoading: boolean = true
  payResult: PayResultModel
  orderId: string
  jsApiModel: JsApiReturnModel
  order: OrderDto
  constructor(props) {
    super(props)
    this.type = this.$router.params.type
    this.orderId = this.$router.params.id
  }
  async componentDidMount() {
    if (this.type === '1') {
      this.getPayStatus()
    }
    else {
      this.getOrderDetail()
    }
    var pages = getCurrentPages()

    let order = pages.find(m => m.route == 'pages/profile/order/index')
    if (order) {
      order.setData({
        orderFlag: true
      })
    }
    let orderIndex = pages.find(m => m.route == 'pages/order/index')
    if (orderIndex) {
      orderIndex.setData({
        orderFlag: false
      })
    }
  }

  async getPayStatus() {
    if (this.isLoading) {
      await this.props.orderStore.getPayStatus(this.$router.params.id)
      this.payResult = this.props.orderStore.payResult
      if (this.payResult.isSuccess) {
        this.isLoading = false
        this.getOrderDetail()
        this.setState({}, async () => {
          await this.getPayStatus()
        })
      }
    }
  }

  async getOrderDetail() {
    await this.props.orderStore.getMyOrderDetail(this.orderId)
    this.order = this.props.orderStore.order
    this.setState({})
  }

  gotoOrderDetail() {
    Taro.redirectTo({
      url: '/pages/profile/order/detail?id=' + this.orderId
    })
  }

  gotoIndex() {
    Taro.redirectTo({
      url: '/pages/index/index'
    })
  }



  async getPay() {
    await this.props.orderStore.getApiPay(this.orderId)
    this.jsApiModel = this.props.orderStore.jsApiModel

    if (this.jsApiModel) {
      let this_ = this
      Taro.requestPayment({
        timeStamp: this.jsApiModel.timestamp,
        nonceStr: this.jsApiModel.nonceStr,
        package: this.jsApiModel.package,
        signType: this.jsApiModel.signType,
        paySign: this.jsApiModel.paySign,
        async success(res) {
          this_.type = '1'
          this_.getPayStatus()
          this_.setState({})
        },
      }).then((res) => {
      })
    }
  }

  render() {

    return (
      <View className='order-wrap'>
        {/*成功*/}
        {this.type === '1' &&
          <View>
            <View className='h2 success'>{this.isLoading ? '正在支付...' : '支付成功'}</View>
            <View className='p'>支付金额：{this.order.finalPrice}</View>
          </View>
        }
        {
          this.type === '2' &&
          <View>
            <View className='h2 danger'>支付失败</View>
            <View className='p'>请在一小时内完成付款<Text>否则订单会被系统取消</Text></View>
          </View>
        }
        <View className='btn-wrap'>
          <AtButton type='secondary' size='small' onClick={this.gotoOrderDetail}>查看订单</AtButton>
          {
            this.type === '1' &&
            <AtButton type='primary' size='small' onClick={this.gotoIndex}>返回首页</AtButton>
          }
          {
            this.type === '2' &&
            <AtButton type='primary' size='small' onClick={this.getPay}>重新支付</AtButton>
          }

        </View>
        {
          this.order.receiptUserName &&
          <View className='address-item ratina-bd bd-b bd-t'>
            <View className='addr-hd'>
              <Text className='name'>{this.order.receiptUserName}</Text>
            </View>
            <View className='addr-bd'>
              <Text className='tel'>{this.order.mobilephone}</Text>
              <Text className='addr-disc'>{this.order.areaCodeDisplayName}{this.order.address}</Text>
            </View>
          </View>
        }
      </View>
    )
  }
}

export default Result
